/* ============================================================
   VARIABLES DE MARCA TEAVALO
   Fuente única de colores y medidas del frontend. Se carga antes
   que header.css, hero-carousel.css y landing.css.
   ============================================================ */
:root {
    /* Colores */
    --orange-teavalo: #FF6F16;
    --blue-teavalo: #051D6B;
    --blue-hover: #04144b;
    --blue-dark-teavalo: #03134A;
    --white-teavalo: #ffffffd8;
    --white-hover: #fff;
    --text-muted-teavalo: #AFBCE8;
    --green-teavalo: #4ADE80;
    --cream: #F7F1E6;

    /* Layout */
    --maximum-dimension: 1520px;
    --pad: clamp(18px, 4vw, 40px);

    /* Compatibilidad: variables HSL que aún consumen plan.css y
       cookie-consent.css (antes vivían en style.css) */
    --base: var(--base-h) var(--base-s) var(--base-l);
    --heading: 232 33% 31%;
    --body: 223 22% 41%;
    --border: 0 0% 90%;
    --danger: 360 78% 62%;
    --secondary: 224 40% 27%;
    --white: 0 0% 100%;
}